<template>
  <input ref="inp" class="input" :value="text" type="text" @input="onInput" @blur="onBlur" @click.stop="">
</template>
<script setup>
  import {reactive,onMounted,ref} from "vue"
  const inp = ref('inp')
  const prop = defineProps({
    text:{
      default:""
    },
    setValue:{
      type: Function,
      default: () => {}
    }
  })
  const input = reactive({
    value: prop.text
  })

  const onInput = (e) => {
    input.value = e.target.value
  }

  const onBlur = (e) => {
    prop.setValue(input.value)
  }

  onMounted(_=>{
  })
</script>
<style>
.input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>